<template>
  <div class="flow-attr">
    <el-button icon="Plus" type="primary" @click="handleEventAdd"
      >新增</el-button
    >
    <FlowEventList
      v-model="data.listeners"
      @change="handleEventEdit"
      @delete="handleEventDelete"
      eventType="1"
    />
    <el-drawer class="flow-drawer" :size="configWidth" v-model="editVisible">
      <template #header>
        <div>
          <el-icon style="margin-right: 10px"><Edit /></el-icon>
          新增事件
        </div>
      </template>
      <FlowEventEdit
        ref="editRef"
        :listeners="data.listeners"
        eventType="1"
        :formItemList="data.formItemList"
        @confirm="handleEventEditConfirm"
      />
    </el-drawer>
  </div>
</template>
<script setup lang="ts" name="FlowBaseEvent">
import type { EventListener } from "@/views/design/process/ProcessNodes";
import { queryFormItemList } from "@/api/flow/form/index";
import FlowEventList from "./FlowEventList.vue";
import FlowEventEdit from "./FlowEventEdit.vue";
import type { Process } from "@/views/design/process/ProcessNodes";
import { nextTick, onMounted, reactive, ref } from "vue";

const props = defineProps({
  defFlow: Object //表单字段列表
});

const _value = defineModel<Process>();
const editRef = ref(null);
const configWidth = ref(500);
const editVisible = ref(false);

const data = reactive({
  formItemList: [],
  listeners: []
});

onMounted(() => {
  queryFormFieldData();
  data.listeners = _value.value.props.listeners;
});

const queryFormFieldData = () => {
  queryFormItemList(props.defFlow.formId).then(res => {
    if (res.code === 200) {
      data.formItemList = res.data;
    } else {
      data.formItemList = [];
    }
  });
};

const handleEventAdd = () => {
  editVisible.value = true;
  nextTick(() => {
    editRef.value?.reset();
  });
};

const handleEventEdit = event => {
  if (!event) return;
  editVisible.value = true;
  nextTick(() => {
    editRef.value?.init(event);
  });
};

const handleEventEditConfirm = (listenersList: EventListener[]) => {
  _value.value.props.listeners = listenersList;
  data.listeners = listenersList;
  editVisible.value = false;
};

const handleEventDelete = (index: number) => {
  _value.value.props.listeners.splice(index, 1);
};
</script>

<style lang="scss" scoped>
@use "@/assets/style/design/flow-attr.scss";
</style>
